<template>
  <div class="Fullcontent">
    <div class="handeyum">
      <div class="AlltoPics">
        <div class="msdateity">
          <div class="msmetisty">
            <div class="Standby">{{ stext }}场</div>
            <img src="@/assets/img/ms/ms12.webp" alt="" />
            <div class="desc">距离结束还有</div>
            <div class="countdown">
              <span>{{ SS }}</span>
              <i>:</i>
              <span>{{ FF }}</span>
              <i>:</i>
              <span>{{ MM }}</span>
            </div>
          </div>
          <div class="countdowneiur">
            <ul>
              <li>
                <router-link to="/flashbuy">
                  <div>
                    <img src="../assets/img/ms/ms1.webp" alt="" />
                  </div>
                  <h3>米家防蓝光护目镜 Pro 墨蓝色</h3>
                  <p>科学护眼 舒适防污</p>
                  <p>
                    <span>139元</span>
                    <del>149元</del>
                  </p>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="countdowneiur">
            <ul>
              <li>
                <router-link to="/flashbuy">
                  <div>
                    <img src="../assets/img/ms/ms3.webp" alt="" />
                  </div>
                  <h3>米家防蓝光护目镜 Pro 墨蓝色</h3>
                  <p>科学护眼 舒适防污</p>
                  <p>
                    <span>139元</span>
                    <del>149元</del>
                  </p>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="countdowneiur">
            <ul>
              <li>
                <router-link to="/flashbuy">
                  <div>
                    <img src="../assets/img/ms/ms4.webp" alt="" />
                  </div>
                  <h3>米家防蓝光护目镜 Pro 墨蓝色</h3>
                  <p>科学护眼 舒适防污</p>
                  <p>
                    <span>139元</span>
                    <del>149元</del>
                  </p>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="countdowneiur">
            <ul>
              <li>
                <router-link to="/flashbuy">
                  <div>
                    <img src="../assets/img/ms/ms2.webp" alt="" />
                  </div>
                  <h3>米家博朗电动剃须刀 黑色</h3>
                  <p>小身材，大动力</p>
                  <p>
                    <span>229元</span>
                    <del>249元</del>
                  </p>
                </router-link>
              </li>
            </ul>
          </div>
          <!-- <Time /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import Time from "./time";
export default {
  name: "Fullcontent",
  components: {
    // Time,
  },
  data() {
    return {
      SS: "00",
      FF: "00",
      MM: "00",
      stime: "",
      stext: "",
      scount: "",
      // sstatus:true,
      tarhour: "",
    };
  },
  methods: {
    // 不要上面的臭弟弟
    taketime() {
      var NowDate = new Date();
      var day = NowDate.getDate();
      var month = NowDate.getMonth() + 1;
      var year = NowDate.getFullYear();
      var hour = NowDate.getHours();
      this.stime = `${year}年${month}月${day}日`;
      if (hour % 2 == 0) {
        if (hour == 0) {
          this.tarhour = 0;
        } else this.tarhour = hour;
        this.countDown(NowDate, year, month, day);
      } else {
        this.tarhour = hour - 1;
        this.countDown(NowDate, year, month, day);
      }
      this.$parent.tarhour = this.tarhour;
      if (this.tarhour < 10) {
        this.stext = `0${this.tarhour} : 00`;
      } else this.stext = `${this.tarhour} : 00`;
    },
    countDown(NowDate, year, month, day) {
      let leftTime =
        year + "/" + month + "/" + day + " " + (this.tarhour + 2) + ":00:00";
      leftTime = new Date(leftTime).getTime();
      let offTime = leftTime - NowDate.getTime();
      let seconds = Math.floor((offTime / 1000) % 60);
      let mins = Math.floor((offTime / 1000 / 60) % 60);
      let hours = Math.floor((offTime / 1000 / 3600) % 24);
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      if (mins < 10) {
        mins = "0" + mins;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      this.scount = "距结束：" + hours + ":" + mins + ":" + seconds;
      this.SS = hours;
      this.FF = mins;
      this.MM = seconds;
    },
  },
  mounted() {
    // 不要上面的臭弟弟
    this.taketime();
    this.scount = setInterval(() => {
      this.taketime();
    }, 500);
  },
  unmounted() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="less" scoped>
.Fullcontent {
  width: 100%;
  height: 100%;
  margin-top: 27px;
  background-color: #f5f5f5;
  .handeyum {
    width: 1226px;
    margin: 0 auto;
    .AlltoPics {
      height: 100%;
      border-top-color: #e53935;
      .msdateity {
        display: flex;
        width: 234px;
        height: 340px;
        background-color: #e53935;
        border-top-color: #e53935;
        .msmetisty {
          width: 234px;
          height: 300px;
          padding-top: 39px;
          border-top-width: 1px;
          border-top: 1px solid #e53935;
          background: #f1eded;
          text-align: center;
          .Standby {
            width: 234px;
            font-size: 21px;
            color: #ef3a3b;
            padding-top: 15px;
          }
          img {
            margin: 25px auto;
          }
          .desc {
            color: rgba(0, 0, 0, 0.54);
            font-size: 15px;
          }
          .countdown {
            width: 168px;
            margin: 28px auto 0;
            i {
              width: 15px;
              float: left;
              height: 46px;
              line-height: 46px;
              color: #605751;
              font-size: 28px;
              font-style: normal;
            }
            span {
              width: 46px;
              height: 46px;
              background: #605751;
              color: #fff;
              font-size: 24px;
              line-height: 46px;
              float: left;
            }
          }
        }
        .countdowneiur {
          width: 978px;
          //   border-top: 1px solid #ffac13;
          margin-left: 14px;
          ul {
            li {
              width: 234px;
              border-top: 1px solid #ffac13;
              text-align: center;
              background: #fff;
              -webkit-transition: all 0.6s;
              transition: all 0.6s;
              position: relative;
              list-style: none;
              a {
                display: block;
                height: 300px;
                padding-top: 39px;
                position: relative;
                div {
                  display: block;
                  width: 160px;
                  margin: 0 auto 22px;
                  img {
                    width: 160px;
                    height: 160px;
                  }
                }
                h3 {
                  margin: 0 20px 10px;
                  font-size: 14px;
                  font-weight: 400;
                  text-overflow: ellipsis;
                  color: #212121;
                  overflow: hidden;
                  white-space: nowrap;
                }
                p {
                  height: 18px;
                  margin: 0 20px 12px;
                  font-size: 14px;
                  text-overflow: ellipsis;
                  color: #b0b0b0;
                  overflow: hidden;
                  white-space: nowrap;
                  span {
                    color: #ff6700;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
